<template>
  <div style="width: 90%; margin: 0 auto">
    <!-- 头部 -->
    <div class="left-head">
      <!-- 考试名称 -->
      <div style="width: 300px; text-align: center; line-height: 30px">
        考试名称：
        <el-input
          v-model="search.examName"
          placeholder="请输入考试名称"
          style="float: right; width: 200px"
          size="small"
        ></el-input>
      </div>
      <!-- 考试时间 -->
      <div style="width: 300px; text-align: center; line-height: 30px">
        考试时长:
        <el-input
          v-model="search.examTime"
          placeholder="请输入考试时长"
          size="small"
          style="float: right; width: 200px"
        ></el-input>
      </div>
      <!-- 更新时间 -->
      <div
        style="
          width: 600px;
          text-align: center;
          line-height: 30px;
          display: flex;
          justify-content: center;
        "
      >
        更新时间:
        <el-time-select
          placeholder="起始时间"
          v-model="search.startTime"
          :picker-options="{
            start: '00:00',
            step: '00:15',
            end: '23:59',
          }"
          size="small"
          style="width: 200px; margin: 0 10px"
        >
        </el-time-select>
        <el-time-select
          placeholder="结束时间"
          v-model="search.endTime"
          :picker-options="{
            start: '00:00',
            step: '00:15',
            end: '23:59',
            minTime: search.startTime,
          }"
          size="small"
          style="width: 200px"
        >
        </el-time-select>
      </div>
      <!-- 三个按钮 -->
      <div style="display: flex; width: 300px; justify-content: space-between">
        <!-- 查询按钮 -->
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          style="height: 40px; width: 90px"
          @click="searchh"
          >查询</el-button
        >
        <!-- 新建按钮 -->
        <div>
          <el-button
            type="primary"
            icon="el-icon-plus"
            @click="xinjian"
            size="mini"
            style="height: 40px; width: 90px"
            >新建</el-button
          >
          <!-- 考试名称 -->
          <el-dialog
            title="考试名称"
            :visible.sync="dialogFormVisible"
            style="width: 1100px; margin: 0 auto"
          >
            <!-- 步骤条 -->
            <el-steps :active="active" finish-status="success">
              <el-step title="考试描述"> </el-step>
              <el-step title="选择题目"></el-step>
            </el-steps>
            <!-- 第一步input输入框内容 -->
            <el-form
              :model="ruleForm1"
              :rules="rules"
              ref="ruleForm1"
              label-width="100px"
              :class="{ active2: flag1 }"
            >
              <el-form-item label="考试名称：" prop="name">
                <el-input v-model="ruleForm1.name"></el-input>
              </el-form-item>
              <el-form-item label="考试限时：" prop="min">
                <el-input-number
                  v-model="ruleForm1.min"
                  controls-position="right"
                ></el-input-number
                ><span>分钟</span>
              </el-form-item>
              <el-form-item label="班级：" prop="region">
                <el-select v-model="ruleForm1.region" placeholder="请选择班级">
                  <el-option label="一班" value="one"></el-option>
                  <el-option label="二班" value="two"></el-option>
                  <el-option label="三班" value="three"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="考试简介：" prop="desc">
                <el-input
                  type="textarea"
                  v-model="ruleForm1.desc"
                  :rows="5"
                ></el-input>
              </el-form-item>
              <el-form-item label="开始时间：" prop="value1">
                <el-date-picker
                  v-model="ruleForm1.value1"
                  type="datetime"
                  placeholder="选择日期时间"
                >
                </el-date-picker>
              </el-form-item>
              <el-form-item label="结束时间：" prop="value2">
                <el-date-picker
                  v-model="ruleForm1.value2"
                  type="datetime"
                  placeholder="选择日期时间"
                >
                </el-date-picker>
              </el-form-item>
              <div class="btn">
                <!-- 取消 -->
                <el-button
                  style="margin-top: 12px"
                  @click="dialogFormVisible = false"
                  >取消</el-button
                >
                <!-- 下一步 -->
                <el-button style="margin-top: 12px" @click="next"
                  >下一步</el-button
                >
              </div>
            </el-form>

            <!-- 第二步input输入框内容 -->
            <el-form
              :model="ruleForm1"
              :rules="rules"
              ref="selectForm"
              label-width="100px"
              :class="{ active1: flag2 }"
              height="400px"
            >
              <el-form-item>
                <!-- 题型选择下拉框 -->
                <el-select
                  v-model="ruleForm1.subject"
                  placeholder="题型选择"
                  style="margin: 5px 50px"
                  @change="table"
                >
                  <!-- @selection-change="handleSelectionChange" -->
                  <el-option
                    v-for="item in option"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
              <!-- 动态选择表格数据 -->
              <el-table
                ref="multipleTable"
                :data="timu"
                tooltip-effect="dark"
                style="width: 100%"
              >
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column label="题目" width="300" prop="topic">
                </el-table-column>
                <el-table-column prop="scope" label="分值">
                  <template slot-scope="scope">
                    <el-input
                      v-model="scope.row.score"
                      placeholder="请输入分值"
                      size="small"
                    ></el-input>
                  </template>
                </el-table-column>
              </el-table>
              <div class="btn">
                <el-button @click="(flag2 = true), (flag1 = false)"
                  >上一步</el-button
                >
                <el-button @click="submit(ruleForm1)">提交</el-button>
              </div>
            </el-form>
          </el-dialog>
        </div>
        <!-- 刷新按钮 -->
        <el-button
          type="primary"
          icon="el-icon-refresh-right"
          size="mini"
          style="height: 40px; width: 90px"
          @click="flushed"
          >刷新</el-button
        >
      </div>
    </div>

    <!-- 表格部分 -->
    <div class="table" style="margin: 0 auto; height: 780px; overflow-y: auto">
      <el-table
        :data="
          tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)
        "
        border
      >
        <el-table-column label="序号" align="center" type="index" width="100">
        </el-table-column>
        <el-table-column prop="examName" label="名称" align="center">
        </el-table-column>
        <el-table-column prop="examScore" label="总分数" align="center">
        </el-table-column>
        <el-table-column prop="examCreator" label="创建人" align="center">
        </el-table-column>
        <el-table-column prop="examTimeLimit" label="时长" align="center">
        </el-table-column>
        <el-table-column prop="updateTime" label="更新时间" align="center">
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <!-- 详情按钮 -->
            <el-button @click="find" size="small" type="success"
              >详情</el-button
            >
            <!-- 编辑按钮 -->
            <el-button type="primary" @click="bianji(scope.row)" size="small"
              >编辑</el-button
            >
            <!-- 删除按钮 -->
            <el-button
              @click="del(scope.$index, scope.row)"
              icon="el-icon-delete"
              size="small"
              type="danger"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 编辑按钮的弹窗 -->
      <el-dialog
        title="编辑考试"
        :visible.sync="dialogFormVisible1"
        style="width: 1100px; margin: 0 auto"
      >
        <el-form
          :model="ruleForm"
          ref="ruleForm2"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="考试名称：">
            <el-input v-model="ruleForm.name"></el-input>
          </el-form-item>
          <el-form-item label="考试限时：">
            <el-input-number
              v-model="ruleForm.num"
              controls-position="right"
            ></el-input-number
            ><span>分钟</span>
          </el-form-item>
          <el-form-item label="班级：">
            <el-select v-model="ruleForm.region1" placeholder="请选择班级">
              <el-option label="一班" value="one"></el-option>
              <el-option label="二班" value="two"></el-option>
              <el-option label="三班" value="three"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="考试简介：">
            <el-input
              type="textarea"
              v-model="ruleForm.desc"
              :rows="5"
            ></el-input>
          </el-form-item>
          <el-form-item label="开始时间：">
            <el-date-picker
              v-model="ruleForm.value1"
              type="datetime"
              placeholder="选择日期时间"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="结束时间：">
            <el-date-picker
              v-model="ruleForm.value2"
              type="datetime"
              placeholder="选择日期时间"
            >
            </el-date-picker>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible1 = false">取 消</el-button>
          <el-button type="primary" @click="tijiao">提交</el-button>
        </div>
      </el-dialog>
    </div>
    <!-- 分页部分 -->
    <div class="block">
      <el-pagination
        background
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageSize"
        :current-page="currentPage"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.length"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        @prev-click="upChange"
        @next-click="nextChange"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { Scope } from "eslint-scope";

export default {
  data() {
    return {
      // tableData:数据的数组
      tableData: [],
      // 搜素数据
      search: {
        // 考试名称
        examName: "",
        // 考试时间
        examTime: "",
        // 开始-结束时间
        startTime: "",
        endTime: "",
      },
      // 表格更新时间
      newTime: "",
      active: 0,
      // 新建按钮
      dialogFormVisible: false,
      flag1: true,
      flag2: false,
      // 第二步输入框空对象
      selectForm: {},
      // 题目空数组
      tableData1: [],
      // 新建空对象
      ruleForm1: {},
      // 编辑空对象
      ruleForm: {},
      //验证规则
      rules: {
        // 考试名称
        name: [
          { required: true, message: "请输入考试名称", trigger: "blur" },
          {
            min: 1,
            max: 10,
            message: "长度在 1 到 10 个字符",
            trigger: "blur",
          },
        ],
        // 班级
        region: [{ required: true, message: "请选择班级", trigger: "blur" }],
        // 考试简介
        desc: [
          {
            required: true,
            min: 1,
            max: 100,
            message: "请填写考试简介",
            trigger: "blur",
          },
        ],
        // 考试限时
        min: [{ required: true, message: "请选择考试限时", trigger: "blur" }],
        // 开始时间
        value1: [
          { required: true, message: "请选择开始时间", trigger: "blur" },
        ],
        // 结束时间
        value2: [
          { required: true, message: "请选择结束时间", trigger: "blur" },
        ],
      },
      // 考试限时的初始值
      num: 1,
      // 开始-结束
      value1: "",
      value2: "",

      // 详情按钮
      dialogFormVisible1: false,
      formLabelWidth: "120px",
      // 分页数据
      pageSize: 5, //一个数据条数
      currentPage: 1, //当前页从哪页开始
      total: 100, //设置总数
      multipleSelection: [],
      // 学科的选择
      option: [
        {
          value: "JAVA",
          label: "JAVA",
        },
        {
          value: "SQL",
          label: "SQL",
        },
        {
          value: "WEB",
          label: "WEB",
        },
        {
          value: "JS",
          label: "JS",
        },
      ],
      // 题目数据
      timu: [],
      arr: [
        {
          topic: "1+1=？",
          subject: "JAVA",
        },
        {
          topic: "1-1=？",
          subject: "JAVA",
        },
        {
          topic: "1*1=？",
          subject: "JAVA",
        },
        {
          topic: "1/1=？",
          subject: "JAVA",
        },
      ],
    };
  },
  methods: {
    // 渲染数据
    getTableList() {
      this.$api.achievementInfo.getTableList().then((res) => {
        if (res.data.code == 200) {
          this.tableData = res.data.data;
        }
        console.log(res);
      });
    },
    //查询按钮
    searchh() {
      this.$api.achievementInfo.getTableList(this.search).then((res) => {
        if (res.data.code == 200) {
          this.tableData = res.data.data;
        }
      });
    },
    // 分页处理
    // 改变每页显示的数量
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.currentPage = 1;
    },
    // 更改页码
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
    },
    // 上一页
    upChange(val) {
      console.log(val);
      this.currentPage -= 1; //动态改变
    },
    // 下一页
    nextChange(val) {
      console.log(val);
      this.currentPage += 1; //动态改变
    },
    // 步骤条下一步
    next(ruleForm1) {
      this.$refs.ruleForm1.validate((valid) => {
        if (valid) {
          if (this.active++ > 2) this.active = 0;
          this.flag1 = true;
          this.flag2 = false;
        } else {
          alert("提交错误，表单不为空！！");
          return false;
        }
      });
    },
    //题型选择的提交
    submit(ruleForm1) {
      if (true) {
        if (this.active++ > 1) this.active = 0;
        this.flag1 = true;
        this.flag2 = false;

        var rulefom_time = this.ruleForm1.time + "分钟";
        this.ruleForm1.time = rulefom_time;
        // 序号
        this.ruleForm1.id = this.tableData.length + 1;
        // 更新时间
        this.ruleForm1.newTime = this.time();
        // 总分
        this.ruleForm1.allResult = "100分";
        // 创建人
        this.ruleForm1.ceo = "李四";
        this.tableData.push(this.ruleForm1);
        let ruleForm = {};
        this.ruleForm1 = ruleForm;
        alert("创建成功!");
      } else {
        console.log("创建失败");
        return false;
      }
      // 自动关闭弹窗
      this.dialogFormVisible = false;
      this.active = 0;
    },

    // 新建按钮
    xinjian() {
      this.dialogFormVisible = true;
      this.active = 0;
      this.flag2 = true;
      this.flag1 = false;
    },
    // 编辑按钮
    bianji(row) {
      this.ruleForm = row;
      this.dialogFormVisible1 = true;
    },
    // 编辑提交
    tijiao(ruleForm2) {
      this.$refs.ruleForm2.validate((valid) => {
        if (valid) {
          for (var i = 0; i < this.tableData.length; i++) {
            if (this.tableData[i].id == this.ruleForm.id) {
              this.ruleForm.newTime = this.time();
              this.tableData[i] = this.ruleForm;
            }
          }
          this.$alert("考试信息更改成功！！", {
            confirmButtonText: "确定",
          });
        } else {
          alert("提交错误，表单输入不正确！！");

          return false;
        }
      });
      this.dialogFormVisible1 = false;
    },
    // 刷新按钮
    flushed() {
      this.$router.go(0);
    },
    // 查看按钮
    find() {
      this.$router.push({ path: "/teacher/find" });
    },
    // 删除按钮
    del(id) {
      console.log(id);
      this.tableData = this.tableData.filter((index) => index.id != id + 1);
    },
    // 获取当前时间
    time() {
      var nowtime = new Date();
      var year = nowtime.getFullYear(); //获取当前时间年份
      var month = nowtime.getMonth(); //获取当前时间月份
      var day = nowtime.getDate(); //获取当前时间日
      //上行是为规划星期的输出
      //下3行分别获得当前时间的时 分 秒
      var hour = nowtime.getHours();
      var minute = nowtime.getMinutes();
      var second = nowtime.getSeconds();
      var nowTime =
        year +
        "-" +
        month +
        "-" +
        day +
        " " +
        hour +
        (minute < 10 ? ":0" : ":") +
        minute +
        (second < 10 ? ":0" : ":") +
        second;
      return nowTime;
    },
    // 动态表格的方法
    // handleSelectionChange(val) {
    //   this.multipleSelection = val;
    // },
    // 选择题型
    table() {
      let arr = [];
      for (var i = 0; i < this.arr.length; i++) {
        if (this.arr[i].subject == this.ruleForm1.subject) {
          arr.push(this.arr[i]);
        }
      }
      this.timu = arr;
    },
  },
  mounted() {
    this.getTableList();
  },
};
</script>
<style scoped lang="less">
.active1 {
  display: none;
}

.active2 {
  display: none;
}
.left-head {
  display: flex;
  justify-content: space-between;
  height: 50px;
  margin: 20px auto 0;
}
.block {
  float: right;
}
.btn {
  text-align: center;
  margin-top: 20px;
  margin-left: 300px;
}
</style>